<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示支付二维码及监听付款状态</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="angularjs/angular.min.js"></script>
    <script type="text/javascript" src="qrcode/qrious.min.js"></script>

    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope, $http) {

            $scope.getCodeUrl = function () {
                $http.get("/weixin/createNative").success(function (data) {
                    $scope.code_url = data.code_url;
                    console.log(JSON.stringify(data));
                    //下面的代码，就是通过qrious工具将微信付款的URL地址转换为 二维码
                    var qr = new QRious({
                        element: document.getElementById('payQrCode'),//指定显示生成后的二维码的img标签的ID
                        size: 250,// 显示生成的二维码尺寸
                        value: data.code_url,// 实际要进行转换的数据
                        level: 'M'//精度度
                    });
                })
            }
        })
    </script>
</head>
<body class="container-fluid" ng-app="myApp" ng-controller="myCtrl" ng-init="getCodeUrl()">
<div class="panel panel-primary">
    <div class="panel-heading">
        微信付款二维码
    </div>
    <div class="panel-body">
        这是付款二维码要显示的地方:{{code_url}}
        <img style="width: 200px;height: 200px" id="payQrCode">
    </div>
</div>
</body>
</html>